<template>
	<view class="content">
		<view class="top">
			<view class="top-left">
				<image src="../../static/login/close.png"></image>
			</view>
			<view class="top-right" @click="sign">
				注册
			</view>
		</view>
		<view class="mid">
			<image src="../../static/login/fire.png"></image>
		</view>
		<view class="text">
			<view class="login">登录</view>
			<view class="welcome">您好，欢迎来到yike！</view>
		</view>
		<form class="input">
			<input type="text" class="user" placeholder="用户名/邮箱" placeholder-class="tip" v-model="data" />
			<input type="text" password="true" class="psw" placeholder="密码" placeholder-class="tip" v-model="psw" />
			<view class="warn" v-if="iswarn">用户名或密码错误！</view>
			<button hover-class="click" @tap="login">登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: '',
				psw: '',
				iswarn: false
			}
		},
		onLoad() {},
		methods: {
			sign() {
				uni.navigateTo({
					url: "../sign/sign",
					animationType: 'pop-in'
				})
			},
			login() {
				uni.request({
					url: this.url + '/login/login',
					data: {
						data: this.data,
						pwd: this.psw
					},
					method: 'POST',
					success: (res) => {
						if (res.data.status != 200) {
							this.iswarn = true
							this.psw = ''
						} else {
							this.iswarn = false
							uni.setStorageSync('token_key', res.data.back.token);
							uni.setStorageSync('user', {'id':res.data.back.id,'name':res.data.back.name,'imgurl':res.data.back.imgurl});
							uni.redirectTo({
								url:'../index/index',
								animationType:'pop-in'
							})
						}
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.top {
		.top-left {
			display: flex;
			align-items: center;
			margin-left: 32rpx;
			width: 48rpx;
			height: 88rpx;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.top-right {
			height: 50rpx;
			width: 72rpx;
			line-height: 50rpx;
			font-size: 36rpx;
			margin-right: 32rpx;
		}
	}


	.text {
		padding: 0 64rpx;

		.login {
			height: 80rpx;
			line-height: 80rpx;
			margin-bottom: 14rpx;
			font-size: 56rpx;
		}

		.welcome {
			height: 56rpx;
			line-height: 56rpx;
			color: $uni-text-color-grey;
			font-size: 40rpx;
		}
	}

	.input {
		padding: 0 64rpx;

		.user,
		.psw {
			margin-top: 45rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1rpx solid rgba(39, 40, 50, 0.08);
			font-size: 32rpx;
		}

		.warn {
			float: left;
			color: $uni-color-warning;
			font-size: 32rpx;
		}

		button {
			margin-top: 120rpx;
			width: 520rpx;
			height: 96rpx;
			line-height: 96rpx;
			font-size: 32rpx;
			background: $uni-color-primary;
			box-shadow: 0 25px 16px -18px rgba(255, 228, 49, 0.40);
			border-radius: 24px;
		}

		.click {
			background-color: $uni-bg-color-grey;
			box-shadow: none;
		}
	}
</style>
